<template>

	<view class="loding" v-if="loding">
		<loading></loading>
	</view>
	
	<view class="project-detail" v-else>
		<view class="contain">
			<view class="top">
				<view class="iconfont icon-bisai "></view>
				<view class="title">技术架构</view>
			</view>
			<view v-for="(item,index) in projectDetail.jishuList" :key="index" class="content">
			<text><text style="color: #208CF0;">{{item.title}}：  </text> {{item.content}}</text>
			</view>
		</view>

		<view class="contain">
			<view class="top">
				<view class="iconfont icon-bisai "></view>
				<view class="title">技术难点及亮点</view>
			</view>
			<view v-for="(item,index) in projectDetail.nandianList" :key="index" class="content">
				<text><text style="color: #208CF0;">{{item.title}}：  </text> {{item.content}}</text>
			</view>
		</view>

		<view class="contain">
			<view>
				<view class="top">
					<view class="iconfont icon-bisai "></view>
					<view class="title">项目详细</view>
				</view>
				<view class="content" v-show="projectDetail.content">
					{{projectDetail.content}}
				</view>
			</view>
		</view>

		<view class="footer">
			项目展示
		</view>
		<view class="detail-img">
			<image src="https://images.gitee.com/uploads/images/2021/0830/092007_67dca653_4964760.png" mode="widthFix">
			</image>
			<image src="https://images.gitee.com/uploads/images/2021/0830/092020_22e75f69_4964760.png" mode="widthFix">
			</image>
			<image src="https://images.gitee.com/uploads/images/2021/0830/092113_f0e14f4a_4964760.png" mode="widthFix">
			</image>
			<image src="https://images.gitee.com/uploads/images/2021/0830/092123_f30c3efc_4964760.png" mode="widthFix">
			</image>
		</view>
	</view>
</template>

<script>
		import loading from '../../components/loading.vue'
	export default {
		data() {
			return {
				projectDetail: {},
				loding: true
			}
		},
		components:{
			loading
		},
		methods: {
			onLoad(option) {
				uniCloud.callFunction({
					name: "project-detail",
					data: {
						id: option.id
					},
					success: (res) => {
						this.loding = false
						if(res.result.data[0]==''){
							console.log("正在加载.....");
						}else{
							this.projectDetail = res.result.data[0]
						}
					},
					fail: (err) => {
						console.log(err);
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loding {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}
	
	.iconfont {
		font-size: 36rpx;
		color: #0c6bbf;
	}

	.project-detail {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.contain {
		background-color: $uni-bg-color;
		color: $color-2;
		width: 82%;
		margin: 20rpx;
		padding: 40rpx;
		box-shadow: 0 6px 21px rgba(0, 0, 0, 0.2);
		border-radius: 9px;
		display: flex;
		font-size: 26rpx;
		flex-direction: column;
		letter-spacing: 2rpx;
	}

	.top {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.title {
		font-size: 27rpx;
		margin-left: 20rpx;
		font-weight: bold;
		color: #208cf0;
	}

	.content {
		display: flex;
		margin: 12rpx 0;
	}

	.footer {
		margin-top: 20rpx;
		text-align: center;
		height: 60rpx;
		background-color: #f8f8f8;
		border: #c7dde6 solid rpx;
		width: 100%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		font-size: 26rpx;
		padding-top: 26rpx;
		font-weight: bold;
		color: #208cf0;

	}

	.detail-img {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
	}

	.detail-img>image {
		margin-bottom: 20rpx;
	}
</style>
